<template>
  <div class="container">
    <div class="button">
      <el-button :icon="Plus" type="primary" @click="handleAddButtonClick">新增</el-button>
    </div>
    <el-table v-loading="isLoading" :data="salaryGroups" border>
      <el-table-column label="ID" prop="salarygroup_id"/>
      <el-table-column label="名称" prop="salarygroup_name"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button link type="primary" @click="handleEditButtonClick(row)">编辑</el-button>
          <el-popconfirm title="是否确定删除？" @confirm="handleDeleteConfirm(row.salarygroup_id)">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <salary-group-drawer v-model="isAddSalaryGroupDrawerShow" @success="handleDrawerSuccess"/>
  <salary-group-drawer
      v-model="isEditSalaryGroupDrawerShow"
      :init-users="salaryGroupToEditUsers"
      :salary-group-to-edit="salaryGroupToEdit"
      @success="handleDrawerSuccess"
  />
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {Plus} from "@element-plus/icons-vue"
import {ElMessage} from "element-plus";
import {isAxiosError} from "axios";
import SalaryGroupResponse from "@/api/types/salaryGroup/SalaryGroupResponse";
import {deleteSalaryGroupById, getSalaryGroups} from "@/api/salaryGroup";
import SalaryGroupDrawer from "@/components/drawer/SalaryGroupDrawer.vue";

const salaryGroups = ref<SalaryGroupResponse[]>()
const isLoading = ref(false)
const isAddSalaryGroupDrawerShow = ref(false)
const isEditSalaryGroupDrawerShow = ref(false)
const salaryGroupToEdit = ref<SalaryGroupRequest>()
const salaryGroupToEditUsers = ref<{ departmentId: number, userId: string }[]>()

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  const {data} = await getSalaryGroups()
  if (data?.info_list !== undefined) {
    salaryGroups.value = data.info_list
    isLoading.value = false
  }
}

getData()

function handleAddButtonClick() {
  isAddSalaryGroupDrawerShow.value = true
}

async function handleDeleteConfirm(id: number) {
  try {
    const {code, msg} = await deleteSalaryGroupById(id)
    if (code == "200") {
      ElMessage.success(msg);
      await getData()
    } else {
      ElMessage.error(msg);
    }
  } catch (error) {
    if (isAxiosError(error) && error.response?.data.message != undefined) {
      ElMessage.error(error.response?.data.message);
    }
  }
}

async function handleDrawerSuccess() {
  await getData()
}

function handleEditButtonClick(salaryGroupResponse: SalaryGroupResponse) {
  console.log(salaryGroupResponse);
  
  salaryGroupToEdit.value = {
    salarygroup_id: salaryGroupResponse.salarygroup_id,
    salarygroup_name: salaryGroupResponse.salarygroup_name,
    userid_list: salaryGroupResponse.user_list?.filter(user => user.userid !== undefined).map(user => user.userid!),
    salary_list: salaryGroupResponse.salary_list?.filter(salaryItem => salaryItem.salaryitem_id !== undefined).map(salaryItem => Number(salaryItem.salaryitem_id))
  }
  salaryGroupToEditUsers.value = salaryGroupResponse.user_list?.filter(user => user.dept_id !== undefined && user.userid !== undefined).map(user => ({
    departmentId: user.dept_id!,
    userId: user.userid!
  }))

  console.log(salaryGroupToEditUsers.value);
  
  isEditSalaryGroupDrawerShow.value = true
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;

  .button {
    margin-bottom: 10px;
  }
}
</style>
